<template>
  <div class="informationShow">
    <el-row :gutter="10" :data="data">
      <div class="cus-info-detail">
        <el-col :span="24" class="mgb10"><b>{{option.title}}</b></el-col>
        <el-col class="mb5" :span="item.span" v-for="(item, index) in option.column" :key="index">
          <span>{{item.label}} ：</span>
          <!--<span>{{item | dataDicTrans(data)}}</span>-->
          <span v-if=!item.cusInput>{{item | dataDicTrans(data)}}</span>
          <span v-else=item.cusInput class="item-rightSet">
            <el-select
              style="width: 100%;"
              filterable
              v-if="item.type == 'select'"
              size="mini"
              v-model="data[item.prop]"
              placeholder="请选择"
              @change="changeModel"
            >
              <el-option
                v-for="item2 in item.dicData"
                :key="item2.value"
                :label="item2.label"
                :value="item2.value">
              </el-option>
            </el-select>
            <el-input v-else clearable size="mini" :class="{'active':item.color}" :disabled="item.disabled" v-model="data[item.prop]"></el-input>
          </span>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
  import {dataDicTrans} from '@/api/bankBiz/loss/loss'
  export default {
    name: 'informationShow',
    props: ['data', 'option'],
    data () {
      return {

      }
    },
    mounted () {

    },
    methods: {
      changeModel(value) {
        this.$emit('changeModel', value)
      }
    }
  }
</script>

<style scoped>

  .mb5 {
    margin-bottom: 5px;
  }

  .informationShow .el-col {
    line-height: 24px;
  }

  .mgb10 {
    margin-bottom: 10px;
  }

  .cus-info-simple {
    height: 120px;
    overflow: hidden;
  }

  .cus-info-detail {
    height: auto;
    overflow: hidden;
  }

  .detailInfoBtn {
    text-align: right;
    height: 40px;
    line-height: 40px;
    border-top: 1px #ccc dashed;
    padding-top: 8px;
  }

  /deep/ .active > .el-input__inner {
    color: red !important;
  }
</style>
